在Vue-cli中,我们默认使用webpack将所有的小于限制数值的资源转为base64格式:如下:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10,
}
},
/*limit: 10,限制 图片大小 10B,小于限制会将图片转换为 base64格式*/
这样做的好处是:将资源转化为base64可以尽可能的减少网络请求次数、提前加载图片(网络不好时候提前显示图片),但是也有很大的缺点,这也是这篇文章主要想表达的问题。
使用base64的缺点大概有:
1、若转化的图片太大,导致数据太大,加载过慢,所以一般像Vue在limit通常默认设置的是10000B。
2、使用base64的资源将不会拥有缓存,即如果些张图片被用来做为有频率切换动画(例如自定义模拟喇叭播放的动画)这样就会由于图片没有缓存而反复请求导致其他的资源请求排队,pending时间从几秒到一分钟不等的问题。
3、在微信小程序里,我们知道背景图片是只能使用base64格式的,但若是其他的静态资源不想使用base64又该如何呢?
下面这种情况是对于不同格式的图片的定义方法,可以根据不同格式的图片做自定义配置:
//webpack.js 中loader配置
{
test: /\.(gif|jpg)$/,
loader: 'url-loader?limit=10000',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(png|svg)$/,//(png|jpg|gif|svg)
loader: 'url-loader',
options: {
limit: 10,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
假如我们想使用一部分base64格式的图片(音频、视频),做法如下:
/*webpack.base.conf.js*/
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10,
name: 'static/images/[name].[ext]',
}
}
]
}
/* page/index.vue */
<script>
let { image_k1 } = { // !注释很重要
/* eslint import/no-webpack-loader-syntax: off */
image_k1: require('!url-loader?limit=10000!../../static/images/image_k1.png')
}
</script>
<template>
<div :style="{backgroundImage:url(`${image_k1}`)}"></div>
</template>
这样就完成了某些资源是base64,其他资源不变的效果。当然 你也可以选择直接在线转换后放到css里然后引用,效果一样。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。